var loadingFn = function () {
    var ary = ['phone-bg.jpg', 'phone-listen.png', 'phone-key.png', 'phone-name.png', 'message-head1.png', 'message-head2.png', 'message-keyboard.png', 'cube-bg.jpg', 'cube-img1.png', 'cube-img2.png', 'cube-img3.png', 'cube-img4.png', 'cube-img5.png', 'cube-img6.png', 'cube-tip.png','bell.mp3','music.mp3','say.mp3'];
    var $processBar = $(".progress-bar");
    var $loading = $(".loading");
		var $enter = $("#enter");
    var num = 0, timer = null;
    $.each(ary, function (index, item) {
        var reg = /\.([a-zA-Z1-9]+)/i;
        var type = reg.exec(item)[1];
        if (type == "mp3") {
           var oAudio = new Audio;
           oAudio.src = 'audio/' + item;
           oAudio.onloadedmetadata = load;
        } else {
        var oImg = new Image();
        oImg.src = "images/" + item;
        oImg.onload = load;
        }

    });
    function load() {
        num++;
        $processBar.css("width", num / ary.length * 100 + "%");
        if (num == ary.length) {
            // window.setTimeout(function () {
 
                // $loading.remove();
                // phoneFn.init();			//**************************执行打电话模块
             //}, 2000)
					$enter.singleTap(function () {
						$loading.remove();	
						phoneFn.init();	//**************************执行打电话模块
					});
        }
    }
}
// window.onload = function(){
    // loadingFn();
// }

/*phone部分*/

var phoneFn = (function () {
    var $phone = $('.phone'),
        $touch = $('.touch'),
        $phoneKey = $(".phone-key"),
        $phoneRefuse = $('.phone-refuse'),
        $phoneText = $('.phone-text'),
        oBell = $('#bell').get(0),
        oSay = $("#say").get(0),
        sayTimer = null;

    function init() {
        oBell.play();
        bind();
    }

    function bind() {
        $touch.singleTap(function () {
            oBell.pause();
            oSay.play();
            $(this).parent().css('display', 'none');
            $phoneKey.css('transform', "translate(0,0)");
            $phoneText.html("00:00");
            sayTimer = window.setInterval(function () {
                $phoneText.html(change(oSay.currentTime));
                if (oSay.currentTime == oSay.duration) {
                    clearInterval(sayTimer);
                    closePhone();
                }

            }, 1000);


        });
        $phoneRefuse.singleTap(function () {
            oSay.pause();
            closePhone();
        })
        function closePhone() {
            var winH = document.documentElement.clientHeight;
            $phone.css({'transform': 'translate(0,' + winH + 'px)', "transition": "1s"});
            window.setTimeout(function () {
                $phone.remove();
                messageFn.init();		//************************************执行发送信息的模块
            }, 1000)

        }
    }

    function change(num) {
        num = parseInt(num);
        var m = toZero(Math.floor(num % 3600 / 60));
        var s = toZero(Math.floor(num % 60));
        return m + ":" + s;
    }

    function toZero(num) {
        return num < 10 ? "0" + num : num;
    }

    return {init: init};

})();


var messageFn = (function () {
    var $msg = $(".msg"),
        $msgUl = $(".content"),
        $oLis = $msgUl.children("p"),
        $audio1 = $(".audio1");

    var h = 0,//存储已显示的p的高度之和
        num = 0,//p的索引,默认从第一个开始显示
        timer = null;//定时器
        music = $("#chinax")[0];

    function init() {
        music.play();
        $audio1.css({"display":"block"});
        musicFn.init();					//**************执行音乐模块
        move();
    }

    function move() {//判断类名是否由btnMsg
        timer = setInterval(function () {
            var $oLi = $oLis.eq(num);
            if (!$oLis.eq(num).hasClass('btnMsg')) {
                //自动发送信息
				$oLi.css({
                    "opacity": 1,
                    "transform": "translate(0,0)"
                });
            } else {
				//模拟信息输入操作
                clearInterval(timer);
                keyboardFn($oLi);
            }
            //如果已经是最后一条信息了，把定时器移除
            if (num == $oLis.length) {
                // window.setTimeout(function () {
                    clearInterval(timer);
										videoFn.init();
                    // $msg.remove();
                    // cubeFn.init();	//***********************************执行魔方页面
                // }, 3000)

            } else {
                if (num >= 5) {
                    h += $oLis[num].offsetHeight + 10;
                    //超过三个开始整个Ul向上移动
                    $msgUl.css("transform", "translate(0," + (-h) + "px)");
                }
                num++;
            }

        }, 1000);

        //模拟用户输入效果

        function keyboardFn(ele) {
            var $keyboard = $(".keyboard"),
                str = "知道.红茶,绿茶,茉莉花茶还有奶茶.",
                str = str.split(""),
                num = 0,
                keyTimer = null,
                keyText = $('.keyboard-text'),
                keyBtn = $('.keyboard-btn'),
                content = "";
            $keyboard.css('transform', "translate(0,0)");
            keyTimer = setInterval(function () {
                content += str[num];
                keyText.html(content);
                num++;

                //结束
                if (num == str.length) {
                    clearInterval(keyTimer);
                    keyBtn.css('opacity', 1);

                    //点击按钮执行发送操作
                    keyBtn.singleTap(function () {
                        keyText.css('opacity', "0");
                        keyBtn.css('opacity', 0);
                        $(ele).css({
                            "transform": "translate(0,0)",
                            "opacity": 1
                        });
                        $keyboard.css({
                            "transform": "translate(0,4.16rem)"
                        });
                        move();

                    })
                }
            }, 100)
        }


    }

    return {init: init}
})();
// messageFn.init();

var musicFn = (function () {
		var $audio1 = $(".audio1"),
				music = $("#chinax")[0];

		function init() {
				bind();
		}
		function pause(){
			music.pause();
		}
		function play(){
			music.play();
		}
		function bind(){
			$audio1.singleTap(function(){
				if(music.paused){
						music.play();
						$audio1[0].classList.add('rotate');
						//addClass(autiobtn, 'rotate');
						console.log("hello");
				}else{
						music.pause();
						//removeClass(autiobtn, 'rotate');
						$audio1[0].classList.remove('rotate');
						console.log("hello2")
				}
			});
		}
		return {init: init,pause: pause,play:play}
})();

/*视频播放*/
var videoFn =(function (){
		function init(){
				var $msg = $(".msg");
				$('body').append('<div class="ar-video-wrapper"><video id="arVideo" width="1" height="1" src="audio/arVideo.mp4"></video></div>');
				var video = $('#arVideo')[0];
				$('.u-content-video').singleTap(function(){
					$msg.remove();
					musicFn.pause();
					$('.ar-video-wrapper').show();
					var videoH = video.videoHeight;
					console.log(videoH);
					var videoW = video.videoWidth;
					console.log(videoW);
					var deviceWidth = document.documentElement.clientWidth;
					console.log(deviceWidth);
					$('#arVideo').css({
						'width':'100%',
						'height':'100%',
						'position':'absolute',
					});
					
					video.play();
					});
					//绑定视频结束事件
					document.getElementById('arVideo').addEventListener('ended',function(){
						var deviceWidth = document.documentElement.clientWidth;
						// $('.weixin').removeClass('curr');
						// $('.share').addClass('curr');
// 						$('#arVideo').css({
// 							translate3d:'-'+deviceWidth+'px,0,0'
// 						},300);
// 						$('.ar-video-wrapper').css({
// 							translate3d:'-'+deviceWidth+'px,0,0'
// 						},300);
// 					},false);
					$('.ar-video-wrapper').remove();	
					cubeFn.init();	//***********************************执行魔方页面
				})
	}
	return {init: init};
	})();


var cubeFn = (function () {
    var $cube = $(".cube"),
        $cubeBox = $('.cube-box');
    var $cubeList = $cubeBox.find("li");
    function init() {
        $cubeBox.css({"transform": "scale(0.5) rotateX(-45deg) rotateY(45deg)"});
//         $cubeBox.on("transitionEnd webkitTransitionEnd", function () {
//             $(this).css("transition", "");	//表示过渡动画结束
//         })
				musicFn.play();
        bind();
        $cubeList.singleTap(function () {
            $cube.hide();
            details.init($(this).index());
        });
    }

    function bind() {
        //初始转动的角度
        var startX = -45;
        var startY = 45;
        var x = 0;//上下翻转的角度
        var y = 0;//左右翻转的角度

        //按下时的坐标
        var downX = 0;
        var downY = 0;
        var flag = false,
            step = 1 / 2;

        $(document).on('touchstart', function (e) {
            downX = e.touches[0].pageX;	//触摸对象
            downY = e.touches[0].pageY
        });
        $(document).on('touchmove', function (e) {
            flag = true;	//滑动变成true
						e.preventDefault();
            //滑动的距离理解成转动的角度,但是距离的正负与转动方向问题
            x = (downY - e.touches[0].pageY) * step;
            y = (e.touches[0].pageX - downX) * step;
            if (startX + x > 70) {	//防止旋转下滑
                x = -startX + 70;
            } else if (startX + x < -70) {
                x = -startX - 70;
            }
            $cubeBox.css("transform", "scale(0.6) rotateX(" + (x + startX) + "deg) rotateY(" + (y + startY) + "deg)");
        });
        $(document).on("touchend", function (e) {
            if (flag) {
                //把每次翻转的角度记录下来,并且保存在startX和startY变量中
                startX += x;
                startY += y;
                flag = false;
            }
        });
    }

    return {init: init}
})();
// cubeFn.init();
var details = (function () {
    var $details = $(".details");
    var $detailsReturn = $(".detailsReturn");
    var $cube = $('.cube');

    // var $slides = $details.find(".swiper-slide");

    function init(index) {
        $details.show();
        $detailsReturn.singleTap(function () {
            $details.hide();
            $cube.show();
        });
        bind(index);

    }

    function bind(index) {
        var mySwiper = new Swiper("#swiper", {
            direction: "horizontal",
            loop: false,
            effect: "coverflow",
            initialSlide: index,
        });
				var mySwiper1 = new Swiper("#swiper1", {
						direction: "vertical",
						loop: false,
						effect: "slide"
				});

    }

    return {init: init}
})()
details.init();